import './index.scss'
import {View, Text} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useEffect} from 'react'
import {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {imagesUrl} from '@/utils/baseUrl'
import MyNav from '@/components/nav'
import {CImg, IconImg, ProductImg} from '@/components/images'

const Aboutus = () => {
  let router = useRouter()

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Aboutus useEffect')
  })

  // 对应 onShow
  useDidShow(() => {
    console.log('Aboutus useDidShow')
  })

  // 对应 onHide
  useDidHide(() => {
    console.log('Aboutus useDidHide')
  })

  return (
    <View
      className="w-screen h-screen bg-x_bg relative flex flex-col"
      style={{
        backgroundImage: `url(${imagesUrl + 'aboutUs-bg.png'})`,
        backgroundSize: '100% 514rpx',
        backgroundRepeat: 'no-repeat'
      }}
    >
      {/* 自定义头部栏 */}
      <MyNav color="white" showBack={true}></MyNav>

      <View className="mt-169">
        <View className="transform -translate-y-26 flex items-center justify-center">
          <CImg imgName="logo-simple" width={204} height={204}></CImg>
        </View>
      </View>

      <View className="px-16 flex flex-col gap-y-24 pb-48">
        <View
          className="hanzi w-full text-15 font-medium"
          style={{
            whiteSpace: 'break-spaces'
          }}
        >
          <View className="leading-27">
            恒蓝云，国内领先的水质检测科技龙头。
          </View>
          <View className="leading-27">
            秉承着客户第一，科技驱动，产品赋能，合作共赢的方式...
          </View>
        </View>

        <View className="w-full rounded-12 overflow-hidden">
          <ProductImg
            imgName="aboutUs-product1"
            width={'100%'}
            height={380}
          ></ProductImg>
        </View>

        <View className="hanzi w-full text-15 font-medium">
          20年老店，浙大科技积累的全面绽放...
        </View>

        <View className="w-full rounded-12 overflow-hidden">
          <ProductImg
            imgName="aboutUs-product1"
            width={'100%'}
            height={380}
          ></ProductImg>
        </View>
      </View>
    </View>
  )
}
export default observer(Aboutus)
